<template>
  <div class="tag-monitor-schedule">
    <tag-content-header summary>
      <template #title>
        <span class="title-text"><icon-svg name="iconMonitor"></icon-svg>调度任务进度监控</span>
      </template>
    </tag-content-header>
    <el-card>
      <div class="monitor-schedule-charts">
        <tag-content-header>
          <template #title>
            <span class="title-text">调度任务汇总</span>
          </template>
        </tag-content-header>
        <div class="charts-box" v-loading="loading">
          <div class="chart-all" id="monitor-schedule-all"></div>
          <div class="chart-platform" id="monitor-schedule-platform"></div>
        </div>
      </div>
    </el-card>
    <el-card class="table">
      <schedule-table ref="scheduleTable" @refresh="getCharts"></schedule-table>
    </el-card>
  </div>
</template>

<script>
import scheduleTable from './schedule-table-item'
import * as echarts from 'echarts'
import utils from '@/plugins/utils'
export default {
  components: {
    scheduleTable
  },
  data() {
    return {
      loading: false,
      chartAll: null,
      chartPlatform: null
    }
  },
  created() {
    this.init()
  },
  activated() {
    if (this.chartAll) {
      this.chartAll.resize()
    }
    if (this.chartPlatform) {
      this.chartPlatform.resize()
    }
  },
  methods: {
    init() {
      this.$nextTick(() => {
        this.getCharts()
        this.$refs.scheduleTable.getList()
      })
    },
    getCharts() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('exec/execScheduleJob/scheduleTaskSummary'),
        method: 'get',
        params: this.$ajax.setParams({
          endTime: utils.formatDateTime(new Date())
        })
      }).then(({ data }) => {
        this.loading = false
        if (data && data.code === '0') {
          this.setChartData(data.data)
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    setChartData(data = []) {
      if (this.$dictList('$exec_module_type').length === 0) {
        setTimeout(() => {
          this.setChartData(data)
        }, 500)
        return
      }
      let config = {
        xAxis: [],
        failedNum: [],
        waitNum: [],
        pauseNum: [],
        runningNum: [],
        successNum: [],
        finishRate: []
      }
      data.forEach(item => {
        if (item.platFormName === '0') {
          this.setChartAll(item)
        } else {
          config.xAxis.push(this.$dict('$exec_module_type')[item.platFormName])
          config.failedNum.push(item.failedNum)
          config.waitNum.push(item.waitNum)
          config.pauseNum.push(item.pauseNum)
          config.runningNum.push(item.runningNum)
          config.successNum.push(item.successNum)
          config.finishRate.push(parseFloat(item.finishRate))
        }
      })
      this.setChartPlatform(config)
    },
    setChartAll(item) {
      if (!this.chartAll) {
        this.chartAll = echarts.init(document.getElementById('monitor-schedule-all'))
        window.addEventListener('resize', () => {
          this.chartAll.resize()
        })
      }
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}'
        },
        legend: {
          left: 'center',
          bottom: 10,
          data: ['挂起', '等待', '已完成', '进行中', '失败']
        },
        color: ['#205694', '#4daac9', '#45b972', '#e7da1a', '#f96363'],
        series: [
          {
            name: '任务汇总',
            type: 'pie',
            center: ['50%', '45%'],
            radius: ['25%', '60%'],
            data: [
              { value: item.pauseNum, name: '挂起' },
              { value: item.waitNum, name: '等待' },
              { value: item.successNum, name: '已完成' },
              { value: item.runningNum, name: '进行中' },
              { value: item.failedNum, name: '失败' }
            ]
          }
        ]
      }
      this.chartAll.setOption(option)
      this.chartAll.resize()
    },
    setChartPlatform(config) {
      if (!this.chartPlatform) {
        this.chartPlatform = echarts.init(document.getElementById('monitor-schedule-platform'))
        window.addEventListener('resize', () => {
          this.chartPlatform.resize()
        })
      }
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          left: 'center',
          bottom: 10,
          data: ['挂起', '等待', '已完成', '进行中', '失败', '完成比例']
        },
        grid: {
          top: 30,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: config.xAxis,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '任务数',
            minInterval: 1,
            axisLine: {
              show: true
            }
          },
          {
            type: 'value',
            name: '完成比例',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value} %'
            },
            axisLine: {
              show: true
            },
            axisTick: { show: false },
            splitLine: { show: false }
          }
        ],
        color: ['#205694', '#4daac9', '#45b972', '#e7da1a', '#f96363'],
        series: [
          {
            name: '挂起',
            type: 'bar',
            stack: 'platform',
            data: config.pauseNum,
            barMaxWidth: '40'
          },
          {
            name: '等待',
            type: 'bar',
            stack: 'platform',
            data: config.waitNum
          },
          {
            name: '已完成',
            type: 'bar',
            stack: 'platform',
            data: config.successNum
          },
          {
            name: '进行中',
            type: 'bar',
            stack: 'platform',
            data: config.runningNum
          },
          {
            name: '失败',
            type: 'bar',
            stack: 'platform',
            data: config.failedNum
          },
          {
            name: '完成比例',
            type: 'line',
            yAxisIndex: 1,
            lineStyle: {
              color: '#72b0f5'
            },
            data: config.finishRate
          }
        ]
      }
      this.chartPlatform.setOption(option)
      this.chartPlatform.resize()
    }
  }
}
</script>

<style lang="scss">
.tag-monitor-schedule {
  .tag-content-header {
    padding: 0 20px;
  }
  .monitor-schedule-charts,
  .monitor-schedule-table {
    .tag-content-header {
      .title-box {
        .icon-svg {
          font-size: 18px;
        }
        .title-text {
          font-size: 14px;
        }
      }
    }
  }
  .charts-box {
    width: 100%;
    height: 300px;
    margin-top: 20px;
    .chart-all {
      float: left;
      width: 35%;
      height: 300px;
    }
    .chart-platform {
      float: left;
      width: 65%;
      height: 300px;
    }
  }
  .table {
    margin-top: 20px;
  }
}
</style>
